<template>
  <div class="page">
    <navigation>{{ $t("忘记密码") }}</navigation>
    <div class="page-main">
      <div class="form">
        <div v-if="useEmail" class="input-group">
          <input
            v-model="email"
            type="text"
            class="input-default input-phone"
            :placeholder="$t('请输入邮箱')"
          />
          <span
            v-if="count === 60"
            class="btn-sms"
            @click="sendCode"
          >{{
            $t("发送验证码")
          }}</span>
          <span
            v-else
            class="btn-sms"
          >{{ count }}s</span>
        </div>
        <div v-else class="input-group">
          <div class="input-areacode">
            +{{ areacode }}
            <select
              v-model="areacode"
              name="nativePhoneCodeSelector"
              class="native-phone-code-select"
            >
              <option
                v-for="item in codeList"
                :key="item.code"
                :value="item.code"
              >
                {{ `+${item.code} ${item.area}` }}
              </option>
            </select>
          </div>
          <input
            v-model="mobile_phone"
            type="text"
            class="input-default input-phone"
            :placeholder="$t('请输入手机号')"
          />
          <span
            v-if="count === 60"
            class="btn-sms"
            @click="sendCode"
          >{{
            $t("发送验证码")
          }}</span>
          <span
            v-else
            class="btn-sms"
          >{{ count }}s</span>
        </div>
        <div class="input-group">
          <input
            v-model="verifyCode"
            type="text"
            class="input-default input-sms-code"
            :placeholder="$t('请输入验证码')"
          />
        </div>
        <div class="input-group">
          <input
            v-model="password"
            :type="watchpassword1 ? 'text' : 'password'"
            class="input-default input-pass"
            :placeholder="$t('请输入新的密码')"
          />
          <span
            class="input-icon"
            :class="watchpassword1 ? 'icon-visible' : 'icon-invisible'"
            @click="watchpassword1 = !watchpassword1"
          ></span>
        </div>
        <div class="input-group">
          <input
            v-model="repassword"
            :type="watchpassword2 ? 'text' : 'password'"
            class="input-default input-repass"
            :placeholder="$t('请确认新的密码')"
          />
          <span
            class="input-icon"
            :class="watchpassword2 ? 'icon-visible' : 'icon-invisible'"
            @click="watchpassword2 = !watchpassword2"
          ></span>
        </div>
        <div class="form-footer">
          <div
            class="btn-submit disabled"
            @click="submit"
          >
            {{ $t("确定") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { isPhoneNumber, isEmail, isPassword } from '@/utils/validate'
import navigation from '@/components/Navigation'
import { AREA_CODE } from '@/constants/area-code'
let timerId
export default {
  components: { navigation },
  data () {
    const { type } = this.$route.query
    return {
      codeList: AREA_CODE,
      watchpassword1: false,
      watchpassword2: false,
      areacode: '86',
      mobile_phone: '',
      email: '',
      loading: false,
      verifyCode: '',
      count: 60,
      password: '',
      repassword: '',
      useEmail: type === 'email'
    }
  },
  methods: {
    ...mapActions({
      sendSms: 'auth/sendSms',
      sendEmailCode: 'auth/sendEmailCode',
      forgetPassword: 'auth/forgetPassword',
      forgetPasswordByEmail: 'auth/forgetPasswordByEmail'
    }),
    resetCount () {
      this.count = 60
      clearInterval(timerId)
    },
    countdown () {
      this.resetCount()
      this.count--
      timerId = setInterval(() => {
        this.count--
        if (this.count === 0) {
          this.resetCount()
        }
      }, 1000)
    },
    sendCode () {
      if (this.loading) {
        return false
      }
      do {
        if (!this.useEmail && !isPhoneNumber(this.mobile_phone)) {
          this.errmsg = this.$t('手机号格式错误')
          break
        }
        if (this.useEmail && !isEmail(this.email)) {
          this.errmsg = this.$t('邮箱格式错误')
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const succeed = () => {
        this.loading = false
        this.countdown()
      }
      const failed = (error) => {
        this.$toast.error(error.message)
        this.loading = false
        this.resetCount()
      }
      if (this.useEmail) {
        const payload = {
          type: 2,
          email: this.email
        }
        this.sendEmailCode(payload)
          .then(succeed)
          .catch(failed)
      } else {
        const payload = {
          type: 2,
          area_code: this.areacode,
          mobile_phone: this.mobile_phone
        }
        this.loading = true
        this.sendSms(payload)
          .then(succeed)
          .catch(failed)
      }
    },
    submit () {
      if (this.loading) {
        return false
      }
      do {
        if (!this.useEmail && !isPhoneNumber(this.mobile_phone)) {
          this.errmsg = this.$t('手机号格式错误')
          break
        }
        if (this.useEmail && !isEmail(this.email)) {
          this.errmsg = this.$t('邮箱格式错误')
          break
        }
        if (!this.verifyCode) {
          this.errmsg = this.$t('请输入验证码')
          break
        }
        if (this.password === '') {
          this.errmsg = this.$t('密码不能为空')
          break
        }
        if (!isPassword(this.password)) {
          this.errmsg = this.$t('密码由6-20个数字、26个英文字母或者下划线组成')
          break
        }
        if (this.password !== this.repassword) {
          this.errmsg = this.$t('两次输入密码不一致')
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const succeed = (data) => {
        this.loading = false
        this.$toast.success(this.$t('修改成功，请重新登录'))
        this.$router.replace({ path: '/login' })
      }
      const failed = () => {
        this.loading = false
      }
      this.loading = true
      if (this.useEmail) {
        const payload = {
          email: this.email,
          varcode: this.verifyCode,
          password: this.password,
          repassword: this.repassword
        }
        this.forgetPasswordByEmail(payload)
          .then(succeed)
          .catch(failed)
      } else {
        const payload = {
          mobile_phone: `${this.areacode}${this.mobile_phone}`,
          varcode: this.verifyCode,
          password: this.password,
          repassword: this.repassword
        }
        this.forgetPassword(payload)
          .then(succeed)
          .catch(failed)
      }
    }
  }
}
</script>
<style scoped>
.page {
  padding-top: 90px;
  height: calc(100vh - 50px);
}

.form {
  padding: 10px 15px;
}
.input-group {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(238, 238, 238, 0.8);
}
.input-default {
  height: 50px;
  line-height: 50px;
  padding-left: 4px;
  border: 1px solid transparent;
  caret-color: #007aff;
  font-size: 15px;
}
.input-areacode {
  width: 50px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #007aff;
  position: relative;
  font-size: 16px;
}
.native-phone-code-select {
  color: rgba(0, 0, 0, 0.0001);
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.input-phone {
  flex: 1;
}
.input-pass {
  flex: 1;
}
.input-repass {
  flex: 1;
}
.input-sms-code {
  flex: 1;
}
.btn-sms {
  font-size: 14px;
  color: #007aff;
  padding: 4px;
  min-width: 80px;
  text-align: center;
  cursor: pointer;
}
.input-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 0 10px;
}
.icon-visible {
  background-image: url("~@/assets/icons/icon-visible.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.icon-invisible {
  background-image: url("~@/assets/icons/icon-invisible.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 78%;
}
.form-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.btn-submit {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  text-align: center;
  border-radius: 0px;
  cursor: pointer;
  letter-spacing: 4px;
}
.btn-submit.disabled {
  opacity: 0.8;
}
</style>
